<form nz-form #validateForm="ngForm" (ngSubmit)="submitForm()" nzLayout="horizontal" autocomplete="off">
  <!-- 模态框头部 -->
  <div class="modal-header">
    <div class="modal-title">
      <i class="iconfont icon-medicine-box mr-sm"></i>
      <span *ngIf="entity.id">{{l('Edit')}}</span>
      <span *ngIf="!entity.id">{{l('Create')}}</span>
    </div>
  </div>
  <!-- 模态框内容 -->
  <fieldset>
    <!-- 提示信息 -->
    <!-- <nz-alert nzType="info" nzCloseable [nzShowIcon]="true" nzMessage="l('我想提示点什么内容给你说')"></nz-alert> -->
    <!-- 书籍名称 : Name 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label nz-col [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">
        {{l('BookName')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <input nz-input name="name" #name="ngModel" [(ngModel)]="entity.name" [placeholder]="l('BookNameInputDesc')"
          required maxlength='50' minlength='1'>

        <!-- 校验 -->
        <nz-form-explain *ngIf="name.control.dirty
                                                 &&name.control.errors">
          <ng-container *ngIf="name.control.hasError('maxlength')">{{l('MaxLength')+50}}</ng-container>
          <ng-container *ngIf="name.control.hasError('minlength')">{{l('MinLength')+1}}</ng-container>
          <ng-container *ngIf="name.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
        </nz-form-explain>

      </nz-form-control>

    </nz-form-item>
    <!--书籍名称 : Name 的控件范围结束=END= -->
    <!-- 作者 : Author 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label nz-col [nzSm]="6" [nzXs]="24" nzRequired nzFor="author">
        {{l('BookAuthor')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <input nz-input name="author" #author="ngModel" [(ngModel)]="entity.author"
          [placeholder]="l('BookAuthorInputDesc')" required maxlength='50' minlength='1'>

        <!-- 校验 -->
        <nz-form-explain *ngIf="author.control.dirty
                                                 &&author.control.errors">
          <ng-container *ngIf="author.control.hasError('maxlength')">{{l('MaxLength')+50}}</ng-container>
          <ng-container *ngIf="author.control.hasError('minlength')">{{l('MinLength')+1}}</ng-container>
          <ng-container *ngIf="author.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
        </nz-form-explain>

      </nz-form-control>

    </nz-form-item>
    <!--作者 : Author 的控件范围结束=END= -->
    <!-- 购买链接 : PriceUrl 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="priceUrl">
        {{l('BookPriceUrl')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <input nz-input name="priceUrl" #priceUrl="ngModel" [(ngModel)]="entity.priceUrl"
          [placeholder]="l('BookPriceUrlInputDesc')" minlength='10'>

        <!-- 校验 -->
        <nz-form-explain *ngIf="priceUrl.control.dirty
                                                 &&priceUrl.control.errors">
          <ng-container *ngIf="priceUrl.control.hasError('minlength')">{{l('MinLength')+10}}</ng-container>
        </nz-form-explain>

      </nz-form-control>

    </nz-form-item>
    <!--购买链接 : PriceUrl 的控件范围结束=END= -->
    <!-- 封面链接 : ImgUrl 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="imgUrl">
        {{l('BookImgUrl')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <input nz-input name="imgUrl" #imgUrl="ngModel" [(ngModel)]="entity.imgUrl"
          [placeholder]="l('BookImgUrlInputDesc')">


      </nz-form-control>

    </nz-form-item>
    <!--封面链接 : ImgUrl 的控件范围结束=END= -->
    <!-- 简介 : Intro 的控件范围=Start= -->
    <nz-form-item nz-row>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="intro">
        {{l('BookIntro')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <!--  控件位置 -->
        <textarea nz-input name="intro" #intro="ngModel" [(ngModel)]="entity.intro"
          [placeholder]="l('BookIntroInputDesc')" nzAutosize maxlength='200' minlength='10'></textarea>

        <!-- 校验 -->
        <nz-form-explain *ngIf="intro.control.dirty
                                                 &&intro.control.errors">
          <ng-container *ngIf="intro.control.hasError('maxlength')">{{l('MaxLength')+200}}</ng-container>
          <ng-container *ngIf="intro.control.hasError('minlength')">{{l('MinLength')+10}}</ng-container>
        </nz-form-explain>

      </nz-form-control>

    </nz-form-item>
    <!--简介 : Intro 的控件范围结束=END= -->
    <nz-form-item nz-row>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="bookTag">
        {{l('BookTag')}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="14" [nzXs]="24">
        <!--  控件位置 -->
        <app-book-tag-select name="tag" [tagsSourceData]="tags" (selectedDataChange)="tagSelectChange($event)">
        </app-book-tag-select>
      </nz-form-control>

    </nz-form-item>
  </fieldset>
  <!-- 模态框底部 -->
  <div class="modal-footer">
    <button nz-button [nzType]="'default'" type="button" (click)="close()" [disabled]="saving">
      <i class="iconfont icon-close-circle"></i> {{l("Cancel")}}
    </button>
    <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.form.valid|| saving"
      [nzLoading]="saving">
      <i class="iconfont icon-save" *ngIf="!saving"></i> {{l("Save")}}
    </button>
  </div>
</form>
